<template>
  <div id="">
      <div class="round">
          <div class="header">
              <div class="logo">
                  logo
              </div>
              <div class="address">
                  <Address>

                  </Address>
              </div>
          </div>
          <div class="search">
            <span></span>
              <input type="search" @input="getValue" class="searchInput" placeholder="输入你要的关键字"  v-model="value">
              <div class="searchResult" v-show="searchResult">
                  <ul v-if="search.length>0">
                    <li @click="goto(item)" class="listItem" v-for="(item,index) in search" >
                  <span class="left" > {{item.name}}</span>
                  <span class="right">{{item.cityname}}{{item.adname}}</span></li>
                  </ul>
                  <p v-if="search.length==0"> {{searchMsg}}</p>
              </div>
          </div>
          <div class="content">
              <div class="left">
                  <div class="title" :class="selectIndex==index?'active':''"
                   @click="changeData(index)" v-for="(item,index) in data" >
                      {{item.tit}}
                  </div>
              </div>
              <div class="right" >
                  <div class="con" @click="goList(item)" v-for="(item ,index) in selectData" :key="(item ,index).key">
                      <span class="img"><img :src="item.img" alt="">
                      </span><span>{{item.name}}</span>
                  </div>
              </div>
          </div>
      </div>
      <myfoot></myfoot>
  </div>
</template>
<script>
import {getList,getSearch} from "@/API"
import myfoot from "@/components/footer"
import Address  from "./map.vue"
export default {
  name: "round",
  data: () => ({
      data:[],
      selectData:[],
      selectIndex:0,
      value:"",
      searchResult:false,
      search:[],
      searchMsg:"正在搜索",
      timeout:null
  }),
  components: {
    myfoot,Address
  },
  created() {
    //do something after creating vue instance
    getList().then(res=>{

      this.data=res.type;
      this.selectData=res.type[0].datainfo
      console.log(this.data)
    })
  },
  methods: {
    changeData(index) {
      this.selectIndex=index;
        this.selectData=this.data[index].datainfo;
    },
    goList(item){
        this.$router.push({path:"list",query:{id:item.name}})
    },
    goto(item){
      console.log(item)
       this.$router.push({path:"detail",query:{id:item.id}})
    },
    getValue(){
      console.log(this.value)
      if(this.value!=""){
        this.search=[]
        this.searchResult=true
        let lng=localStorage.getItem("lng")||"116.30894"
        let lat=localStorage.getItem("lat")||"40.03346"
        // console.log("请求的数据参数是"+this.value)
        clearTimeout(this.timeout)
        this.timeout= setTimeout(()=>{
          getSearch(lng,lat,this.value).then(res=>{
            console.log(res)
            if(res.infocode=="10000"){
              this.search=res.pois;
            }
          })
        },500)


      }else{
        this.searchResult=false
      }
    }
  }
}
</script>
<style lang="less" scoped>


.round{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .header{
      height: 1.2rem;
      border-bottom: 1px dashed #ccc;
      display: flex;
      justify-content: center;
      .logo{
        flex: 1;
      }
      .address{
        flex:2;
        display: flex;
        align-items: center;
      }
  }
  .search{
    .searchResult{
      position: absolute;
      height: auto;
      width: 90%;
      left: 5%;
      background: #ccc;
    }
    height:1rem;
    border-bottom: 1px solid #ccc;
    .searchInput{
      width: 90%;
      height: 80%;
      border: 1px solid gray;
      border-radius: 10px;
      padding-left: 8px;
    }
    .listItem{
      height: 25px;
      line-height: 25px;
      font-size: 16px;
      display: flex;
      .left{
          display: block;
          flex: 2;
          text-align: left;
          padding-left: 5px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
      }
      .right{
        display: block;
        flex: 1;
      }
    }

  }
  .content{
    flex: 1;
    overflow: hidden;
    display: flex;
      .left{

          flex:1;

          .title{
              border-bottom: 1px solid #ccc;
            height: 1.5rem;
            width: 100%;
            line-height: 1.5rem;
            font-size: 24px;
          }
          .active{
            border: none;
            border-left: 4px solid  skyblue;
            background: #f6f6f6;
          }
      }
      .right{

        flex: 3;
        display: flex;
        flex-direction: column;

        .con{

            width: 100%;
          background: #f6f6f6;
            border-bottom: 1px solid #ccc;
          height: 1.5rem;
          line-height: 1.5rem;
          font-size: 24px;
          .img img{
              float: left;
            height: 80%;
            margin-left: 50px;
          }
        }
      }
  }
}

</style>
